<template>
  <div class="chat-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <div class="logo-section">
        <div class="logo">
          <div class="logo-icon">🤖</div>
          <h2>科技企业</h2>
          <p class="logo-subtitle">AI智能体</p>
        </div>
        <button class="new-chat-btn" @click="startNewChat">
          <span class="plus-icon">+</span>
          新建对话
        </button>
      </div>

      <div class="chat-history">
        <div
            v-for="chat in chatList"
            :key="chat.id"
            :class="['chat-item', { active: chat.id === currentChatId }]"
            @click="switchChat(chat.id)"
        >
          <span class="chat-icon">💬</span>
          <span class="chat-title">{{ chat.title }}</span>
        </div>
      </div>

      <div class="sidebar-footer">
        <div class="workspace-section">
          <div class="workspace-item" @click="toggleKnowledgePanel">
            <span class="workspace-icon">📁</span>
            知识库合集
            <span class="add-icon">+</span>
          </div>
          <div class="workspace-item">
            <span class="workspace-icon">💾</span>
            数据库合集
            <span class="add-icon">+</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识库面板组件 -->
    <KnowledgePanel 
      :show-panel="showKnowledgePanel"
      @close="closeKnowledgePanel"
      @panel-state-change="handlePanelStateChange"
    />

    <!-- 主聊天区域 -->
    <div v-if="!showKnowledgePanel" class="main-content">
      <!-- 功能卡片模式 -->
      <div v-if="showFeatureCards" class="feature-mode">
        <div class="chat-header">
          <h1 class="main-title">AI智能体</h1>
          <p class="subtitle">
            专业AI智能助手，提供智能对话、数据分析、代码协助等全方位AI服务，助力您的工作和学习
          </p>
        </div>

        <div class="feature-cards">
          <div class="card">
            <div class="card-icon">💡</div>
            <h3>智能对话</h3>
            <p>基于先进的自然语言处理技术，提供流畅的对话体验和智能问答服务</p>
          </div>

          <div class="card">
            <div class="card-icon">📊</div>
            <h3>数据分析</h3>
            <p>强大的数据挖掘和分析能力，支持多种数据格式的处理和可视化展示</p>
          </div>

          <div class="card">
            <div class="card-icon">🐍</div>
            <h3>代码助手</h3>
            <p>专业的Python代码分析和优化建议，支持代码审查、调试和重构</p>
          </div>

          <div class="card">
            <div class="card-icon">🔧</div>
            <h3>SQL查询</h3>
            <p>自然语言转SQL查询，简化数据库操作，支持复杂查询语句生成</p>
          </div>

          <div class="card">
            <div class="card-icon">⚡</div>
            <h3>实时响应</h3>
            <p>快速响应用户需求，支持多轮对话和上下文理解</p>
          </div>

          <div class="card">
            <div class="card-icon">📝</div>
            <h3>文档处理</h3>
            <p>智能文档分析和处理，支持文本总结、翻译和格式转换</p>
          </div>
        </div>
      </div>

      <!-- 对话模式 -->
      <div v-else class="chat-mode">
        <div class="chat-header-simple">
          <h3>{{ currentChat?.title || '新对话' }}</h3>
          <div class="chat-actions">
            <button class="action-btn" @click="backToFeatures">🔄</button>
            <button class="action-btn">⚙️</button>
          </div>
        </div>

        <div ref="messagesContainer" class="messages-container">
          <div class="messages-wrapper">
            <div v-if="currentMessages.length === 0" class="empty-state">
              <div class="empty-icon">💬</div>
              <p>开始新的对话吧！</p>
            </div>

            <div
                v-for="message in currentMessages"
                :key="message.id"
                :class="['message', message.type]"
            >
              <div class="message-avatar">
                <span v-if="message.type === 'user'">👤</span>
                <span v-else>🤖</span>
              </div>
              <div class="message-content">
                <div class="message-text">
                  <span :key="message.content.length" v-html="formatMessage(message.content)"></span>
                  <span v-if="message.isStreaming" class="typing-cursor">|</span>
                </div>
                <div class="message-time">{{ formatTime(message.timestamp) }}</div>
                <!-- AI回复时显示停止按钮 -->
                <div v-if="message.type === 'assistant' && message.isStreaming" class="stop-button-container">
                  <button class="stop-button" @click="stopAIResponse">
                    <span class="stop-icon">⏸</span>
                    停止回答
                  </button>
                </div>
                <!-- AI回复完成后显示复制按钮 -->
                <div v-if="message.type === 'assistant' && !message.isStreaming && message.content.trim()" class="copy-button-container">
                  <button class="copy-button" @click="copyMessage(message.content)">
                    <span class="copy-icon">📋</span>
                    复制
                  </button>
                </div>
              </div>
            </div>

            <!-- AI思考动画 -->
            <div v-if="isThinking" class="message assistant">
              <div class="message-avatar">
                <span>🤖</span>
              </div>
              <div class="message-content">
                <div class="thinking-animation">
                  <div class="thinking-text">AI正在思考</div>
                  <div class="thinking-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部输入栏 - 固定在底部 -->
      <div v-if="!showKnowledgePanel" class="bottom-toolbar">
        <div class="input-section">
          <div class="input-container">
            <!-- 下拉选择器 -->
            <div class="selector-container" @click="toggleSelector">
              <div class="selector-content">
                <span class="selector-icon">{{ selectedOption.icon }}</span>
                <span class="selector-text">{{ selectedOption.label }}</span>
                <span class="selector-arrow" :class="{ 'expanded': showSelector }">▲</span>
              </div>
              <!-- 下拉选项 -->
              <div v-if="showSelector" class="selector-dropdown">
                <div 
                  v-for="option in selectorOptions" 
                  :key="option.value"
                  class="selector-option"
                  :class="{ 'active': option.value === selectedOption.value && !selectedKnowledgeBase }"
                  @click.stop="selectOption(option)"
                >
                  <span class="option-icon">{{ option.icon }}</span>
                  <span class="option-text">{{ option.label }}</span>
                  <span v-if="option.value === 'knowledge'" class="arrow-right">▶</span>
                </div>
              </div>
              <!-- 知识库列表 -->
              <div v-if="knowledgeBases.length > 0 && showKnowledgeList" class="knowledge-list-dropdown">
                <div class="knowledge-list-header">
                  <span class="list-title">选择知识库</span>
                </div>
                <div 
                  v-for="kb in knowledgeBases" 
                  :key="kb.id"
                  class="knowledge-item"
                  :class="{ 'active': selectedKnowledgeBase?.id === kb.id }"
                  @click.stop="selectKnowledgeBase(kb)"
                >
                  <div class="knowledge-info">
                    <span class="knowledge-name">{{ kb.collection_name }}</span>
                  </div>
                </div>
              </div>
            </div>

            <input
                v-model="inputMessage"
                class="chat-input"
                placeholder="请输入您的问题..."
                type="text"
                @keydown.enter="sendMessage"
            />
            <div class="input-actions">
              <button class="attachment-btn">📎</button>
              <button
                  :disabled="!inputMessage.trim() || isThinking"
                  class="send-btn"
                  @click="sendMessage"
              >
                ➤
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 复制成功提示 -->
    <div v-if="copySuccessVisible" class="copy-success-toast">
      <span class="success-icon">✅</span>
      已复制到剪贴板
    </div>


  </div>
</template>

<script setup>
import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import {sendChatMessage, testConnection, sendStreamChatMessage, uploadDocuments, getKnowledgeBases} from '@/api/chat.js'
import KnowledgePanel from '@/components/KnowledgePanel.vue'

// 响应式数据
const inputMessage = ref('')
const isThinking = ref(false)
const currentChatId = ref(null)
const messagesContainer = ref(null)
const showFeatureCards = ref(true)
const streamingTimer = ref(null)
const apiConnected = ref(false)
const pendingTypingText = ref('')


// 下拉选择器相关数据
const showSelector = ref(false)
const showKnowledgeList = ref(false)
const selectorOptions = [
  { value: 'knowledge', label: '知识库', icon: '📚' },
  { value: 'model', label: '大模型', icon: '🤖' }
]
const selectedOption = ref(selectorOptions[1]) // 默认选择大模型

// 知识库列表数据（模拟数据，实际会从API获取）
const knowledgeBases = ref([])
const selectedKnowledgeBase = ref(null)


// 流式输出控制
const currentAbortController = ref(null)

// 知识库面板相关
const showKnowledgePanel = ref(false)
const showFilePanel = ref(false)


// 聊天列表
const chatList = reactive([
  {id: 1, title: '关于机器学习的问题', createdAt: new Date(Date.now() - 86400000)},
  {id: 2, title: 'Python代码优化', createdAt: new Date(Date.now() - 172800000)},
  {id: 3, title: '数据分析需求', createdAt: new Date(Date.now() - 259200000)}
])

// 消息存储
const messagesStore = ref({
  1: [
    {
      id: 1,
      type: 'user',
      content: '你好，能帮我解释一下机器学习的基本概念吗？',
      timestamp: new Date(Date.now() - 3600000)
    },
    {
      id: 2,
      type: 'assistant',
      content: '你好！我很乐意为您解释机器学习的基本概念。\n\n机器学习是人工智能的一个分支，它让计算机系统能够从数据中学习并做出决策或预测，而无需显式编程。\n\n**主要类型包括：**\n1. **监督学习** - 使用标记数据训练模型\n2. **无监督学习** - 在无标记数据中发现模式\n3. **强化学习** - 通过奖励机制学习最优策略\n\n您想了解哪个方面的更多细节呢？',
      timestamp: new Date(Date.now() - 3590000),
      isStreaming: false
    }
  ],
  2: [],
  3: []
})

// 计算属性
const currentChat = computed(() =>
    chatList.find(chat => chat.id === currentChatId.value)
)

const currentMessages = computed(() =>
    messagesStore.value[currentChatId.value] || []
)

// 方法
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isThinking.value) return

  const message = inputMessage.value
  inputMessage.value = ''

  // 立即隐藏功能卡片，切换到对话模式
  if (showFeatureCards.value) {
    showFeatureCards.value = false
    // 创建新对话
    if (!currentChatId.value) {
      const newChat = {
        id: Date.now(),
        title: '新对话',
        createdAt: new Date()
      }
      chatList.unshift(newChat)
      currentChatId.value = newChat.id
      messagesStore.value[newChat.id] = []
    }
  }

  const userMessage = {
    id: Date.now(),
    type: 'user',
    content: message,
    timestamp: new Date()
  }

  // 添加用户消息
  if (!messagesStore.value[currentChatId.value]) {
    messagesStore.value[currentChatId.value] = []
  }
  messagesStore.value[currentChatId.value].push(userMessage)

  // 更新聊天标题
  const currentChatIndex = chatList.findIndex(chat => chat.id === currentChatId.value)
  if (currentChatIndex !== -1) {
    chatList[currentChatIndex].title = message.slice(0, 20) + (message.length > 20 ? '...' : '')
  }

  // 强制更新DOM并滚动到底部
  await nextTick()
  scrollToBottom()
  if(selectedKnowledgeBase.value){
    //基于知识库的对话
    await simulateAIResponseByKnowledge(message, selectedKnowledgeBase.value.collection_name)
  }else{
    // 大模型对话
    await simulateAIResponse(message)
  }
}

const simulateAIResponse = async (userMessage) => {
  isThinking.value = true
  pendingTypingText.value = '' // 清空之前的累积文本
  typingQueue.value = [] // 清空打字机队列
  isTyping.value = false // 重置打字状态
  
  // 创建新的AbortController用于中断请求
  currentAbortController.value = new AbortController()
  
  await nextTick()
  scrollToBottom()

  try {
    // 准备请求数据
    const chatHistory = messagesStore.value[currentChatId.value] || []
    const requestData = {
      message: userMessage,
      chat_history: chatHistory
          .filter(msg => msg.content.trim()) // 过滤空内容
          .map(msg => ({
            role: msg.type === 'user' ? 'user' : 'assistant',
            content: msg.content
          }))
    }

    // 创建空的AI消息对象
    const aiMessage = {
      id: Date.now(),
      type: 'assistant',
      content: '',
      timestamp: new Date(),
      isStreaming: true
    }

    // 添加到消息数组
    messagesStore.value[currentChatId.value].push(aiMessage)
    
    isThinking.value = false
    await nextTick()
    scrollToBottom()

    // 使用流式聊天接口
    await sendStreamChatMessage(
      requestData,
      currentAbortController.value.signal,
      // onMessage回调 - 接收每个数据块
      (chunk) => {
        console.log('流式API调用回调:', chunk)
        if (chunk) {
          // 处理不同类型的chunk，去掉特殊前缀和工具调用信息
          let processedChunk = chunk
          
          // 去掉工具调用前缀
          if (chunk.startsWith('🔧 正在使用工具:')) {
            return // 跳过工具调用信息
          }
          if (chunk.startsWith('📝 工具结果:')) {
            return // 跳过工具结果信息
          }
          
          // 去掉最终输出前缀
          if (chunk.startsWith('💬 ')) {
            processedChunk = chunk.substring(2)
          }
          
          // 过滤掉纯英文的工具调用内容
          if (/^[a-zA-Z_\s]+$/.test(processedChunk.trim())) {
            return // 跳过纯英文内容
          }
          
          // 对处理后的chunk启动打字机效果
          if (processedChunk.trim()) {
            startTypingEffectForChunk(aiMessage, processedChunk)
          }
        }
      },
      // onError回调 - 处理错误
      (error) => {
        console.error('流式API调用错误:', error)
        const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === aiMessage.id)
        if (messageIndex !== -1) {
          messagesStore.value[currentChatId.value][messageIndex].content = `抱歉，服务暂时不可用：${error.message || '未知错误'}`
          messagesStore.value[currentChatId.value][messageIndex].isStreaming = false
        }
      },
      // onComplete回调 - 流式输出完成
      () => {
        console.log('流式输出完全完成')
        
        // 等待所有打字机效果完成后，设置消息为完成状态
        const waitForTypingComplete = () => {
          if (!isTyping.value && typingQueue.value.length === 0) {
            console.log('所有打字机效果完成，设置消息状态为完成')
            const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === aiMessage.id)
            if (messageIndex !== -1) {
              messagesStore.value[currentChatId.value][messageIndex].isStreaming = false
            }
            scrollToBottom()
          } else {
            // 如果还在打字或队列中还有内容，继续等待
            setTimeout(waitForTypingComplete, 100)
          }
        }
        
        waitForTypingComplete()
      }
    )

  } catch (error) {
    console.error('API调用错误:', error)
    isThinking.value = false
    
    // 如果是用户主动中断，不显示错误
    if (error.name === 'AbortError') {
      console.log('用户主动停止了AI回复')
      return
    }

    // 网络错误，显示错误信息
    const errorMessage = {
      id: Date.now(),
      type: 'assistant',
      content: '抱歉，网络连接失败，请检查网络连接或稍后重试。',
      timestamp: new Date(),
      isStreaming: false
    }
    messagesStore.value[currentChatId.value].push(errorMessage)
    await nextTick()
    scrollToBottom()
  }
}

const simulateAIResponseByKnowledge = async (userMessage , collection_name) => {
  isThinking.value = true
  pendingTypingText.value = '' // 清空之前的累积文本
  typingQueue.value = [] // 清空打字机队列
  isTyping.value = false // 重置打字状态

  // 创建新的AbortController用于中断请求
  currentAbortController.value = new AbortController()

  await nextTick()
  scrollToBottom()

  try {
    // 准备请求数据
    const chatHistory = messagesStore.value[currentChatId.value] || []
    const requestData = {
      collection_name,
      message: userMessage,
      chat_history: chatHistory
          .filter(msg => msg.content.trim()) // 过滤空内容
          .map(msg => ({
            role: msg.type === 'user' ? 'user' : 'assistant',
            content: msg.content
          }))
    }

    // 创建空的AI消息对象
    const aiMessage = {
      id: Date.now(),
      type: 'assistant',
      content: '',
      timestamp: new Date(),
      isStreaming: true
    }

    // 添加到消息数组
    messagesStore.value[currentChatId.value].push(aiMessage)

    isThinking.value = false
    await nextTick()
    scrollToBottom()

    // 使用流式聊天接口
    await sendStreamChatMessage(
        requestData,
        currentAbortController.value.signal,
        // onMessage回调 - 接收每个数据块
        (chunk) => {
          console.log('流式API调用回调:', chunk)
          if (chunk) {
            // 处理不同类型的chunk，去掉特殊前缀和工具调用信息
            let processedChunk = chunk

            // 去掉工具调用前缀
            if (chunk.startsWith('🔧 正在使用工具:')) {
              return // 跳过工具调用信息
            }
            if (chunk.startsWith('📝 工具结果:')) {
              return // 跳过工具结果信息
            }

            // 去掉最终输出前缀
            if (chunk.startsWith('💬 ')) {
              processedChunk = chunk.substring(2)
            }

            // 过滤掉纯英文的工具调用内容
            if (/^[a-zA-Z_\s]+$/.test(processedChunk.trim())) {
              return // 跳过纯英文内容
            }

            // 对处理后的chunk启动打字机效果
            if (processedChunk.trim()) {
              startTypingEffectForChunk(aiMessage, processedChunk)
            }
          }
        },
        // onError回调 - 处理错误
        (error) => {
          console.error('流式API调用错误:', error)
          const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === aiMessage.id)
          if (messageIndex !== -1) {
            messagesStore.value[currentChatId.value][messageIndex].content = `抱歉，服务暂时不可用：${error.message || '未知错误'}`
            messagesStore.value[currentChatId.value][messageIndex].isStreaming = false
          }
        },
        // onComplete回调 - 流式输出完成
        () => {
          console.log('流式输出完全完成')

          // 等待所有打字机效果完成后，设置消息为完成状态
          const waitForTypingComplete = () => {
            if (!isTyping.value && typingQueue.value.length === 0) {
              console.log('所有打字机效果完成，设置消息状态为完成')
              const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === aiMessage.id)
              if (messageIndex !== -1) {
                messagesStore.value[currentChatId.value][messageIndex].isStreaming = false
              }
              scrollToBottom()
            } else {
              // 如果还在打字或队列中还有内容，继续等待
              setTimeout(waitForTypingComplete, 100)
            }
          }

          waitForTypingComplete()
        }
    )

  } catch (error) {
    console.error('API调用错误:', error)
    isThinking.value = false

    // 如果是用户主动中断，不显示错误
    if (error.name === 'AbortError') {
      console.log('用户主动停止了AI回复')
      return
    }

    // 网络错误，显示错误信息
    const errorMessage = {
      id: Date.now(),
      type: 'assistant',
      content: '抱歉，网络连接失败，请检查网络连接或稍后重试。',
      timestamp: new Date(),
      isStreaming: false
    }
    messagesStore.value[currentChatId.value].push(errorMessage)
    await nextTick()
    scrollToBottom()
  }
}

// 真实流式数据的打字机效果
const startTypingEffect = (message, text) => {
  console.log('开始打字机效果:', text)
  const characters = Array.from(text) // 处理中文字符
  let currentIndex = 0
  
  // 设置消息为流式状态
  message.isStreaming = true
  
  // 清除可能存在的定时器
  if (streamingTimer.value) {
    clearInterval(streamingTimer.value)
  }
  
  streamingTimer.value = setInterval(() => {
    if (currentIndex >= characters.length) {
      // 输出完成
      console.log('打字机效果完成')
      clearInterval(streamingTimer.value)
      streamingTimer.value = null
      message.isStreaming = false
      scrollToBottom()
      return
    }
    
    // 逐字符添加到消息内容
    const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === message.id)
    if (messageIndex !== -1) {
      messagesStore.value[currentChatId.value][messageIndex].content += characters[currentIndex]
    }
    
    currentIndex++
    
    // 自动滚动到底部
    nextTick(() => {
      scrollToBottom()
    })
  }, 30) // 每30ms输出一个字符，更快的打字效果
}

// 逐块打字机效果 - 将新的chunk添加到待处理队列
const typingQueue = ref([])
const isTyping = ref(false)

const startTypingEffectForChunk = (message, chunk) => {
  console.log('添加chunk到打字机队列:', chunk)
  
  // 检查是否被停止
  if (!isTyping.value && typingQueue.value.length === 0) {
    // 重置打字状态
    isTyping.value = true
  }
  
  // 将chunk添加到队列
  typingQueue.value.push(chunk)
  
  // 如果当前没有在打字，开始处理队列
  if (isTyping.value && typingQueue.value.length === 1) {
    processTypingQueue(message)
  }
}

const processTypingQueue = (message) => {
  // 检查是否被停止
  if (!isTyping.value || typingQueue.value.length === 0) {
    isTyping.value = false
    return
  }
  
  isTyping.value = true
  message.isStreaming = true
  
  const chunk = typingQueue.value.shift()
  const characters = Array.from(chunk)
  let currentIndex = 0
  
  console.log('开始处理chunk:', chunk)
  
  const typeCharacter = () => {
    // 检查是否被停止
    if (!isTyping.value) {
      console.log('打字被停止')
      return
    }
    
    if (currentIndex >= characters.length) {
      // 当前chunk处理完成，继续处理下一个
      console.log('chunk处理完成，继续下一个')
      setTimeout(() => {
        processTypingQueue(message)
      }, 50) // 稍微延迟，让用户看到停顿效果
      return
    }
    
    // 逐字符添加到消息内容
    const messageIndex = messagesStore.value[currentChatId.value].findIndex(m => m.id === message.id)
    if (messageIndex !== -1) {
      messagesStore.value[currentChatId.value][messageIndex].content += characters[currentIndex]
    }
    
    currentIndex++
    
    // 自动滚动到底部
    nextTick(() => {
      scrollToBottom()
    })
    
    // 继续下一个字符
    setTimeout(typeCharacter, 30) // 每30ms一个字符
  }
  
  typeCharacter()
}



const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

const startNewChat = () => {
  const newChat = {
    id: Date.now(),
    title: '新对话',
    createdAt: new Date()
  }
  chatList.unshift(newChat)
  currentChatId.value = newChat.id
  messagesStore.value[newChat.id] = []
  showFeatureCards.value = true
}

const switchChat = async (chatId) => {
  // 取消当前正在进行的流式输出
  if (streamingTimer.value) {
    clearInterval(streamingTimer.value)
    streamingTimer.value = null
  }

  // 停止思考动画
  isThinking.value = false

  // 清空当前对话的所有消息
  if (messagesStore.value[chatId]) {
    messagesStore.value[chatId] = []
  }

  currentChatId.value = chatId
  showFeatureCards.value = true // 切换到历史会话时总是显示功能卡片

  await nextTick()
  scrollToBottom()
}


const backToFeatures = () => {
  showFeatureCards.value = true
}

const formatMessage = (content) => {
  return content.replace(/\n/g, '<br>')
}

const formatTime = (timestamp) => {
  return timestamp.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}



// 下拉选择器方法
const toggleSelector = () => {
  showSelector.value = !showSelector.value
  showKnowledgeList.value = false // 关闭知识库列表
}

const selectOption = (option) => {
  if (option.value === 'knowledge') {
    // 如果选择知识库，显示知识库列表
    showKnowledgeList.value = true
    return
  }
  selectedOption.value = option
  selectedKnowledgeBase.value = null // 清空知识库选择
  showSelector.value = false
  showKnowledgeList.value = false
  console.log('切换到:', option.label)
}

const selectKnowledgeBase = (kb) => {
  selectedKnowledgeBase.value = kb
  selectedOption.value = {
    value: 'knowledge',
    label: kb.collection_name,
    icon: '📚' 
  }
  showSelector.value = false
  showKnowledgeList.value = false
}

// 停止AI回复
const stopAIResponse = () => {
  console.log('用户点击停止回答')
  
  // 1. 立即中断当前的网络请求
  if (currentAbortController.value) {
    currentAbortController.value.abort()
    currentAbortController.value = null
  }
  
  // 2. 立即停止思考动画
  isThinking.value = false
  
  // 3. 立即清空打字机队列和停止打字状态
  typingQueue.value = []
  isTyping.value = false
  
  // 4. 立即清除所有定时器
  if (streamingTimer.value) {
    clearInterval(streamingTimer.value)
    streamingTimer.value = null
  }
  
  // 5. 立即设置当前AI消息为完成状态，不添加任何额外内容
  const currentChatMessages = messagesStore.value[currentChatId.value] || []
  const lastMessage = currentChatMessages[currentChatMessages.length - 1]
  if (lastMessage && lastMessage.type === 'assistant' && lastMessage.isStreaming) {
    lastMessage.isStreaming = false
    // 不添加任何标识，保持当前内容不变
  }
  
  scrollToBottom()
}

// 复制消息内容
const copyMessage = async (content) => {
  try {
    // 移除HTML标签，只保留纯文本
    const textContent = content.replace(/<br>/g, '\n').replace(/<[^>]*>/g, '')
    await navigator.clipboard.writeText(textContent)
    console.log('消息已复制到剪贴板')
    // 可以添加一个短暂的提示
    showCopySuccess()
  } catch (error) {
    console.error('复制失败:', error)
    // 降级方案：使用传统的复制方法
    fallbackCopyTextToClipboard(content.replace(/<br>/g, '\n').replace(/<[^>]*>/g, ''))
  }
}

// 显示复制成功提示
const copySuccessVisible = ref(false)
const showCopySuccess = () => {
  copySuccessVisible.value = true
  setTimeout(() => {
    copySuccessVisible.value = false
  }, 2000)
}

// 降级复制方案
const fallbackCopyTextToClipboard = (text) => {
  const textArea = document.createElement('textarea')
  textArea.value = text
  textArea.style.top = '0'
  textArea.style.left = '0'
  textArea.style.position = 'fixed'
  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()
  
  try {
    const successful = document.execCommand('copy')
    if (successful) {
      console.log('消息已复制到剪贴板 (降级方案)')
      showCopySuccess()
    } else {
      console.error('复制失败')
    }
  } catch (err) {
    console.error('复制失败:', err)
  }
  
  document.body.removeChild(textArea)
}

// 知识库面板方法
const toggleKnowledgePanel = () => {
  showKnowledgePanel.value = !showKnowledgePanel.value
  if (!showKnowledgePanel.value) {
    showFilePanel.value = false
  }
}

const closeKnowledgePanel = () => {
  showKnowledgePanel.value = false
  showFilePanel.value = false
}

const handlePanelStateChange = (state) => {
  showFilePanel.value = state.showFilePanel
}

// 生命周期
onMounted(async () => {
  //查询知识库列表
  const res = await getKnowledgeBases()
  if(res.code === 200){
    knowledgeBases.value = res.data
  }
  // 默认不选中任何会话
  currentChatId.value = null
  showFeatureCards.value = true

  // 测试API连接
  try {
    apiConnected.value = await testConnection()
    if (apiConnected.value) {
      console.log('✅ API连接成功')
    } else {
      console.warn('⚠️ API连接失败')
    }
  } catch (error) {
    console.error('❌ API连接测试失败:', error)
    apiConnected.value = false
  }

  // 添加全局点击事件监听，用于关闭下拉选择器
  document.addEventListener('click', (event) => {
    const selectorContainer = document.querySelector('.selector-container')
    if (selectorContainer && !selectorContainer.contains(event.target)) {
      showSelector.value = false
      showKnowledgeList.value = false
    }
  })
})
</script>

<style scoped lang="scss">
.chat-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0a1a2a 0%, #1e3c5a 100%);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}

/* 左侧边栏样式 */
.sidebar {
  width: 280px;
  background: rgba(15, 30, 45, 0.8);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 3;
}

.logo-section {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.logo-icon {
  font-size: 24px;
}

.logo h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.logo-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.new-chat-btn {
  width: 100%;
  padding: 12px;
  background: #00d4aa;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.new-chat-btn:hover {
  background: #00c199;
  transform: translateY(-1px);
}

.plus-icon {
  font-size: 18px;
}

.chat-history {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.chat-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.chat-item.active {
  background: rgba(0, 212, 170, 0.2);
  border-left: 3px solid #00d4aa;
}

.chat-icon {
  font-size: 16px;
}

.chat-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.workspace-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
}

.workspace-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.workspace-icon {
  font-size: 16px;
}

.add-icon {
  margin-left: auto;
  font-size: 18px;
  color: #00d4aa;
}



/* 主内容区域样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding-bottom: 100px; /* 为底部输入框留出空间 */
  width: calc(100vw - 280px); /* 减去侧边栏宽度 */
}

/* 功能卡片模式 */
.feature-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  text-align: center;
  padding: 30px 20px 15px;
}

.main-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 20px 0;
  background: linear-gradient(135deg, #00d4aa, #4dabf7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
  padding: 0 20px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 40px;
  flex: 1;
  overflow-y: auto;
  max-width: none;
  max-height: 100%;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 212, 170, 0.3);
  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.1);
}

.card-icon {
  font-size: 24px;
  margin-bottom: 16px;
}

.card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: white;
}

.card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* 对话模式 */
.chat-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-header-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 30, 45, 0.5);
}

.chat-header-simple h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.chat-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
  height: 100%;
}

.messages-wrapper {
  padding: 20px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  opacity: 0.6;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  animation: fadeInUp 0.3s ease;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.message.user .message-avatar {
  background: #00d4aa;
}

.message-content {
  max-width: 70%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.message.user .message-content {
  background: rgba(0, 212, 170, 0.2);
  border-color: rgba(0, 212, 170, 0.3);
}

.message-text {
  line-height: 1.5;
  margin-bottom: 8px;
}

.message-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

.message.user .message-time {
  text-align: left;
}

/* 停止回答按钮 */
.stop-button-container {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.stop-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 16px;
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stop-button:hover {
  background: rgba(255, 107, 107, 0.3);
  border-color: rgba(255, 107, 107, 0.5);
  transform: translateY(-1px);
}

.stop-icon {
  font-size: 11px;
}

/* 复制按钮 */
.copy-button-container {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.copy-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 212, 170, 0.2);
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 16px;
  color: #00d4aa;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.copy-button:hover {
  background: rgba(0, 212, 170, 0.3);
  border-color: rgba(0, 212, 170, 0.5);
  transform: translateY(-1px);
}

.copy-icon {
  font-size: 11px;
}

/* 复制成功提示 */
.copy-success-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(0, 212, 170, 0.9);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1001;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 212, 170, 0.3);
  animation: slideInFade 0.3s ease-out;
}

.success-icon {
  font-size: 16px;
}

@keyframes slideInFade {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 流式输出光标 */
.typing-cursor {
  display: inline;
  font-weight: bold;
  color: #00d4aa;
  animation: blink 0.8s infinite;
  margin-left: 1px;
  font-size: 16px;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* AI思考动画 */
.thinking-animation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.thinking-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.thinking-dots {
  display: flex;
  gap: 4px;
}

.thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d4aa;
  animation: thinking 1.4s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* 底部工具栏样式 - 固定在底部 */
.bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 280px; /* 避开侧边栏 */
  right: 0;
  width: calc(100vw - 280px); /* 确保宽度正确 */
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 30, 45, 0.95);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box; /* 包含padding在宽度计算中 */
}

.selector-container {
  position: relative;
  min-width: 120px;
  margin-right: 12px;
}

.selector-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.selector-content:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #00d4aa;
}

.selector-icon {
  font-size: 14px;
}

.selector-text {
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.selector-arrow {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease;
}

.selector-arrow.expanded {
  transform: rotate(180deg);
}

.selector-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: rgba(15, 30, 45, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
  z-index: 1001;
}

.selector-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selector-option:last-child {
  border-bottom: none;
}

.selector-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.selector-option.active {
  background: rgba(0, 212, 170, 0.2);
  border-color: rgba(0, 212, 170, 0.3);
}

/* 知识库列表样式 */
.knowledge-list-dropdown {
  position: absolute;
  bottom: 100%;
  left: 100%;
  width: 280px;
  background: rgba(15, 30, 45, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
  margin-left: 8px;
  z-index: 1002;
  max-height: 300px;
  overflow-y: auto;
}

.knowledge-list-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px 8px 0 0;
}

.list-title {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.knowledge-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.knowledge-item:last-child {
  border-bottom: none;
}

.knowledge-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.knowledge-item.active {
  background: rgba(0, 212, 170, 0.2);
  border-color: rgba(0, 212, 170, 0.3);
}

.knowledge-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.knowledge-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.knowledge-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.4;
}

.option-icon {
  font-size: 14px;
}

.option-text {
  color: white;
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.arrow-right {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
}

.input-section {
  min-width: 60%;
  margin: 0 auto;
  padding: 0 20px;
}

.input-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  padding: 4px 4px 4px 12px;
  transition: all 0.3s ease;
}

.input-container:focus-within {
  border-color: #00d4aa;
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2);
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  font-size: 14px;
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-actions {
  display: flex;
  gap: 8px;
  padding-right: 8px;
}

.attachment-btn,
.send-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
}

.send-btn {
  background: #00d4aa;
}

.send-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}

.attachment-btn:hover,
.send-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes thinking {
  0%, 60%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }

  .main-content {
    padding-bottom: 120px; /* 移动端输入框高度调整 */
  }

  .bottom-toolbar {
    left: 60px; /* 移动端侧边栏宽度调整 */
    width: calc(100vw - 60px); /* 移动端宽度调整 */
  }

  .main-content {
    width: calc(100vw - 60px); /* 移动端主内容宽度调整 */
  }



  .selector-container {
    min-width: 100px;
    margin-right: 8px;
  }

  .logo h2,
  .logo-subtitle,
  .chat-title,
  .workspace-item span:not(.workspace-icon):not(.add-icon) {
    display: none;
  }

  .feature-cards {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .message-content {
    max-width: 85%;
  }
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.dialog-content {
  background: #1a2b3d;
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-header h3 {
  margin: 0;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.dialog-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #00d4aa;
  background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.upload-section {
  width: 100%;
}

.upload-area {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
}

.upload-area:hover {
  border-color: #00d4aa;
  background: rgba(0, 212, 170, 0.05);
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.upload-text {
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.upload-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.file-list {
  margin-top: 16px;
  max-height: 200px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.file-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.file-name {
  flex: 1;
  color: white;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-file {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.remove-file:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ff6b6b;
}

.radio-group {
  display: flex;
  gap: 24px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

.radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #00d4aa;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.submit-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.submit-btn {
  background: #00d4aa;
  color: white;
}

.submit-btn:hover:not(:disabled) {
  background: #00c199;
  transform: translateY(-1px);
}

.submit-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  transform: none;
}
</style> 